<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				list-style: none;
				
			}
			li{
				float: left;
				margin: 10px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<button>点击</button>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<p>我不变色</p>
		</ul>
		<script>
			const btn = document.querySelector('button');
			// console.log(this)
			function fn(){
				alert('你好啊自己，别EMO！还有JavaScript陪你！');
			}
			btn.addEventListener('click',fn);
			// 解绑事件
			btn.removeEventListener('click',fn);
			
			// 事件委托
			// 原理：借用事件的冒泡，好处：减少注册次数，提高性能
			//需求只让点击li文字改为红色
			// const ul = document.querySelector("ul");
			// ul.addEventListener('click',function(e){
			// 	 // this.style.color='#a40000';
			// 	console.dir(e.target);
				
			// 	// 判断
			// 	// 只有当e.target.tagName==='LI'
			// 	if(e.target.tagName==='LI'){
			// 		e.target.style.color='#a40000'; 
			// 	}
			// })
			const ul=document.querySelector('ul');
			ul.addEventListener('click',function(e){
				console.log(e.target.tagName);
				if(e.target.tagName==='LI'){
					e.target.style.color='red';
				}
			})
		</script>
	</body>
</html>